<template>
  <div class="project-details">
    <div>
      <img src="../assets/img/index-banner1.jpg" width="100%">
    </div>
    <div class="project-content">
      <h1><strong>{{ form.name }}</strong></h1>
      <div style="text-align: right; font-size: 20px; color: rgb(102, 102, 102);">
        <div style="margin-right: 15px; margin-bottom: 15px">
          <label>浏览量 ：{{ form.clickNum }}</label>
        </div>
      </div>
      <!-- <el-divider></el-divider> -->
      <div class="description-container">
        <div v-html="form.description" class="rich-text-content"></div>
      </div>
      <h3>创建时间：{{ form.createTime }}</h3>
      <el-divider></el-divider>

      <div style="color: rgb(102,102,102); font-size: 15px; margin-left: 15px ">
        <label v-if="this.hasNext" @click="goNextProject"
               style="display: block;margin-bottom: 10px; cursor: pointer;">上一个:{{ this.nextName }}</label>
        <label v-if="this.hasPre" @click="goPreProject"
               style="display: block;margin-bottom: 10px; cursor: pointer;">下一个:{{ this.preName }}</label>
      </div>
    </div>
  </div>
</template>


<script>
import 'quill/dist/quill.core.css';  // 导入富文本编辑器样式
import {listDemand, getDemand, delDemand, addDemand, updateDemand} from "@/api/project/demand";
import dict from "../utils/dict";
import {getNextProject, getPreProject} from "../api/project/demand";

export default {
  name: 'ProjectDetails',
  // dicts: ['project_state', 'project_line', 'team_name', 'check_result'],
  data() {
    return {
      hasNext: null,
      hasPre: null,
      preId: null,
      nextId: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 需求表格数据
      demandList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      detailOpen: false,
      seeCheckOpen: false,
      seeClaimNeedDetailOpen: false,
      claimNeedDetailForm: {},

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        type: 2,
        line: null,
        prize: null,
        awardTime: null,
        userId: null,
        otherPrize: null,
        state: null,
        needNum: null,
        // isShow: 1
      },
      currentPageList: [],
      demandId: null,
      from: null,
      initialFrom: null,
      nextName: null,
      preName: null,
      // 表单参数
      form: {},
    };
  },
  created() {
    this.demandId = this.$route.query.id;
    this.from = this.$route.query.from;
    this.initialFrom=this.from;
    this.handleUpdate(this.$route.query.id);
    this.getPreProject(this.$route.query.id,this.initialFrom);
    this.getNextProject(this.$route.query.id,this.initialFrom);

  },
  methods: {
    getPreProject(id,from) {
      getPreProject(id,this.initialFrom).then(response => {
        this.preId = response.data.id;
        if (this.preId === -1) {
          this.hasPre = false;
          this.preName = undefined;
        } else {
          this.hasPre = true;
          this.preName = response.data.name;
        }
      })
    },
    getNextProject(id,from) {
      getNextProject(id,this.initialFrom).then(response => {
        this.nextId = response.data.id;
        if (this.nextId === -1) {
          this.hasNext = false;
          this.nextName = undefined;
        } else {
          this.hasNext = true;
          this.nextName = response.data.name;
        }
      })
    },
    updatePreAndNext() {
      this.getPreProject(this.topicId);
      this.getNextProject(this.topicId);
    },
    goPreProject() {
      this.topicId = this.preId;
      this.handleUpdate(this.topicId);
      this.updatePreAndNext();
    },
    goNextProject() {
      this.topicId = this.nextId;
      this.handleUpdate(this.topicId);
      this.updatePreAndNext();
    },
    // 表单重置
    reset() {
      this.checkForm = {
        checker1Id: null,
        checker2Id: null,
        result1: null,
        result2: null,
        suggestion1: null,
        suggestion2: null,
        checker1Name: null,
        checker2Name: null,
        checker_time1: null,
        checker_time2: null
      };
      this.form = {
        id: null,
        name: null,
        type: null,
        description: null,
        line: null,
        keyTask1: null,
        keyTask2: null,
        keyTask3: null,
        prize: null,
        awardTime: null,
        file: null,
        innovation: null,
        userId: null,
        clickNum: null,
        otherPrize: null,
        checker1: null,
        checker2: null,
        state: null,
        needNum: null,
        isShow: null,
        createTime: null
      };
      this.resetForm("form");
    },
    handleUpdate(id) {
      this.reset();
      getDemand(id).then(response => {
        this.form = response.data;
      });
    },
  },
};
</script>

<style scoped>
.project-details {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 0 100px;
  box-sizing: border-box;
}

.project-content {
  max-width: 80%; /* 控制内容的最大宽度 */
  width: 100%;
  border: 50px solid #fff;
  margin-top: -240px;
  background: #ffffffad;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  overflow: auto;
}

.description-container {
  width: 80%; /* 边框容器占据父容器的80% */
  margin: 0 auto; /* 自动居中 */
  margin-top: 100px;
  line-height: 2;
  padding: 10px; /* 可选：添加内边距以增强内容与边框之间的间距 */
}

.rich-text-content {
  width: 100%; /* 内容占据父容器的100% */
  font-size: 20px;

}

h1 {
  font-size: 36px;
  margin-top: 56px;
  /* margin-bottom: 13px; */
  text-align: center; /* 居中标题文本 */
  line-height: 1.5;
}

h2 {
  font-size: 18px;
  margin-left: 90px;
  margin-right: 40px;
  line-height: 1.7;
}

h3 {
  margin-top: 30px;
  text-align: right;
  color: rgb(102, 102, 102);
}


p {
  font-size: 23px;
  line-height: 1.6;
  margin-bottom: 15px;
  margin-left: 50px;
  margin-top: 20px;
}

strong {
  font-weight: bold;
}
</style>
